<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="elementui/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/util.js"></script>
    <script src="elementui/index.js"></script>
</head>
<body>
        <div id="app">
            <a onclick="location.href='add.html'">添加</a>

            <input type="text" v-model="name">
            <input type="button" value="搜索" @click="findPage()">
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">



                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="操作">
                </el-table-column>
            </el-table>


            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :page-size="page.pageSize"
                    :current-page="page.pageIndex"
                    layout="prev, pager, next,total"
                    :total="page.total">
            </el-pagination>

        </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            page:{
                pageIndex:1,
                total:0,
                pageSize:2
            },
            name:""
        },
        methods:{
            findPage(){
                axios.get("/order/findPage?pageIndex="+this.page.pageIndex+"&name="+this.name).then(res=>{
                    this.tableData=res.data.records;
                    this.page.total=res.data.total;
                })
            },
            del(id){
                axios.get("/order/del?id="+id).then(res=>{
                    this.findPage(1);
                })
            },
            handleCurrentChange(pageIndex){
                this.page.pageIndex=pageIndex;
                this.findPage(1);
            }
        },
        created(){
            this.findPage();
        }
    })
</script>
</html>